<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>罚款审批记录</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="punishmenty-approval-record">
      <div>
        <search-btn-view btn-text="查询审批记录" @before-open="resetSearch" @search="searchData">
          <div slot="search-content">
            <search-form :search="search" :person-list="personList" mode="punishmenty"></search-form>
          </div>
        </search-btn-view>
      </div>
      <div class="punishmenty-approval-table-div" :class="{'hasPage':pagination.totalCount!==0}">
        <el-table border fit class="punishmenty-approval-table" :data="records" style="width: 100%" height="parent" :span-method="mergeCell"
          :row-class-name="setRowClassName" @row-click="lookDetail" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave">
          <el-table-column :resizable="false" label="审批编号" prop="approvalNo" min-width="140px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="罚款明细" header-align="center">
            <el-table-column :resizable="false" label="罚款金额(元)" prop="price" min-width="90px" align="center"></el-table-column>
            <el-table-column show-overflow-tooltip :resizable="false" label="罚款类别" prop="punishmentyType" min-width="100px" header-align="center">
            </el-table-column>
            <el-table-column show-overflow-tooltip :resizable="false" label="罚款人员" prop="punishedUserName" min-width="100px" align="center">
            </el-table-column>
            <el-table-column show-overflow-tooltip :resizable="false" label="说明" prop="reason" min-width="120px" header-align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column :resizable="false" label="审批状态" min-width="80px" align="center">
            <template slot-scope="props">
              <span>{{i18n.getMsg(`approvalRecord.status.${props.row.state}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip :resizable="false" label="审批记录" prop="approvalInfo" min-width="180px" header-align="center">
          </el-table-column>
          <el-table-column :resizable="false" label="提交人" prop="submitterName" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="部门" prop="deptName" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="提交时间" min-width="145px" align="center">
            <template slot-scope="props">
              <span>{{moment(props.row.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog :title="selectRecord===null?'':selectRecord.approvalNo" :visible.sync="openDialog" top="10vh" width="60%"
      custom-class="approval-detail-dialog" @closed="dialogClosed">
      <div style="height:calc(80vh - 54px);overflow:auto;">
        <approval-detail v-if="openDialog" :record="selectRecord"></approval-detail>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/imgUpload.css",
    "/vueSystem/components/css/deptTransfer.css",
    "/attendanceMgr/components/css/deptPersonSelect.css",
    "/attendanceMgr/components/css/approvalSearchForm.css",
    "./css/approvalDetail.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/imgUpload.js",
    "/vueSystem/components/deptTransfer.js",
    "/vueSystem/mixins/datePickerOptionsMixin.js",
    "/attendanceMgr/components/deptPersonSelect.js",
    "/attendanceMgr/components/approvalSearchForm.js",
    "/attendanceMgr/mixins/approvalRecordMixin.js"
  ]);

</script>
<script src="./approvalDetail.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [approvalRecordMixin('punishmenty')],

    data: function () {
      return {
        selectRecord: null,
        openDialog: false
      };
    },

    methods: {
      getApprovalRecords: function (records) {
        var approvalRecords = [];
        for (var i = 0; i < records.length; i++) {
          var record = records[i];

          var createTime = record.createTime;
          createTime = moment(createTime).format('YYYY-MM-DD HH:mm');
          var approvalArr = [`${record.submitterName}|${createTime}|提交申请`];

          var punishmentyProcessList = record.reimburseProcessList;
          for (var j = 0; j < punishmentyProcessList.length; j++) {
            var punishmenty = punishmentyProcessList[j];
            var dealwithTime = punishmenty.dealwithTime;
            dealwithTime = moment(dealwithTime).format('YYYY-MM-DD HH:mm');
            var status = punishmenty.dealwithState;
            var statusStr = i18n.getMsg(`approvalRecord.approvalStats.${status}`);
            var str = `${punishmenty.approverName}|${dealwithTime}|${statusStr}`;
            approvalArr.push(str);
          }
          record.approvalInfo = approvalArr.join('；');

          var punishmentyInfoList = record.reimburseInfoList;
          var image = punishmentyInfoList[0].image;
          if (SysUtil.isEmpty(image)) {
            image = [];
          } else {
            image = image.split(',');
          }
          record.image = image;
          record.rowIndex = i;
          for (var j = 0; j < punishmentyInfoList.length; j++) {
            var punishmentyInfo = punishmentyInfoList[j];
            record = _.cloneDeep(record);
            record.price = Number(punishmentyInfo.price);
            record.punishmentyType = punishmentyInfo.reimburseType;
            record.reason = punishmentyInfo.reason;
            record.punishedUserId = punishmentyInfo.punishedUserId;
            record.punishedUserName = punishmentyInfo.punishedUserName;
            record.groupIndex = j;
            if (j === 0) {
              record.spanRow = punishmentyInfoList.length;
            }
            approvalRecords.push(record);
          }
        }
        return approvalRecords;
      },

      lookDetail: function (record) {
        this.selectRecord = record;
        this.openDialog = true;
      },

      dialogClosed: function () {
        this.selectRecord = null;
      }
    },

    components: {
      ApprovalDetail: ApprovalDetail
    }
  });

</script>
<style>
  .punishmenty-approval-record {
    padding: 10px 20px;
    padding-bottom: 5px;
    height: calc(100% - 15px);
  }

  .punishmenty-approval-record .punishmenty-approval-table-div {
    height: calc(100% - 46px);
    overflow: auto;
  }

  .punishmenty-approval-record .punishmenty-approval-table-div.hasPage {
    height: calc(100% - 88px);
  }

  .punishmenty-approval-record .el-table .odd {
    background: #FAFAFA;
  }

  .approval-detail-dialog {
    min-width: 400px;
  }

</style>

</html>
